import styles from './role-detail.module.scss'
import {useContext, useMemo} from "react";
import {RoleContext} from "@/app/components/role/role-list";
import {useNavigate, useParams} from "react-router-dom";
import {createNewMessage, userChatStore} from "@/app/store/chat-store";
import {Avatar, Button, Tag} from "antd";
import {MessageRole} from "@/types/chat";

export function RoleDetail() {
    const {id} = useParams<{ id: any }>();
    const {roles} = useContext(RoleContext);
    const chatStore = userChatStore();
    const navigate = useNavigate();

    const role = useMemo(() => {
        return roles.find((role) => role.id == id);
    }, [id, roles])

    const start = () => {
        let session = chatStore.openSession({avatar: role?.avatar, title: role?.role_name});
        const message = createNewMessage(role?.description || '', MessageRole.user);
        chatStore.onSendMessage(message);
        navigate(`/chat/${session.id}`, {state: {title: session.dialog.title}});
        // setTimeout(() => {
        // }, 0)
    }

    return (
        <div className={styles["wrapper"]}>
            <div className={styles["header"]}>{role?.role_name}</div>
            <div className={styles["scroll"]}>
                <Avatar shape="square" size={64} src={role?.avatar}/>
                <p className={styles["desc"]}>
                    <Tag bordered={false} color="processing">
                        角色介绍
                    </Tag>
                    {role?.description}
                </p>
                <Button className={styles["btn"]} type="primary" onClick={start}>
                    开始对话
                </Button>
            </div>
        </div>
    )
}
